<!-- 快速提问 -->
<template>
	<view class="page">
		<view class="container">
			<view class="form">
				<text class="title">标题</text>
				<input class="input" type="text" v-model="formData.title" placeholder="填写优质标题能让跟多人看到您的帖子"
					placeholder-style="color: #999;" />
				<textarea class="text-area" v-model="formData.description" placeholder="建议您填写更多的细节，真实可信的内容更容易获得更多回复"
					placeholder-style="color: #999;" />

				<view class="tags-box">
					<view class="tags">
						<view class="tag" v-for="item in tags" :key="item.id">
							{{item.name}}
							<button @click="handleRemoveTag(item.id)" class="close-btn iconfont">&#xe603;</button>
						</view>
					</view>
					<button class="add-tag btn-transition-scale9" @click="handleAddTag()">添加标签</button>
				</view>

				<text class="title">上传图片</text>
				<view class="upload-item">
					<view class="pic-box" v-for="item in filePaths" :key="item.id">
						<image class="pic" :src="item.path" mode="aspectFill">
						</image>
						<button @click="handleRemovePic(item.id)" class="close-btn iconfont">&#xe603;</button>
					</view>
					<!-- 选择图片按钮 -->
					<button @click="handleChooseImage()"
						class="upload-btn iconfont btn-transition-scale95">&#xe617;</button>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<c-fixed-bottom height="88rpx" extra-bottom-distance="40rpx">
			<view class="btn-box">
				<button class="submit-btn btn-transition-scale95" @click="handleSubmit()">提 交</button>
			</view>
		</c-fixed-bottom>
	</view>

	<!-- 选择标签面板 -->
	<selectTagPanel v-model:visible="isShowTagPanel" :checked-tag-ids="formData.tag_id" @change="tagsChange">
	</selectTagPanel>
</template>

<script setup>
	import api from '@/api/index.js';
	import { ref, toValue } from 'vue';
	import selectTagPanel from "./components/select-tag-panel.vue";

	// 提交的数据
	const formData = ref({
		title: '',
		description: '',
		tag_id: '',
		photo: '',
	});

	// 处理标签相关
	const { tags, tagsChange, handleRemoveTag, handleAddTag, isShowTagPanel } = function(formData) {
		const isShowTagPanel = ref(false); // 是否显示“选择标签面板”
		const tags = ref([]); // 选中的标签

		// 选择标签后回调
		const tagsChange = (arr) => {
			tags.value = arr;
			formData.value.tag_id = arr.map(item => item.id).join();
		}

		// 删除标签
		const handleRemoveTag = (id) => {
			const index = tags.value.findIndex(item => item.id === id);
			tags.value.splice(index, 1);
			formData.value.tag_id = tags.value.map(item => item.id).join();
		}

		// 添加标签
		const handleAddTag = () => {
			isShowTagPanel.value = true;
		}

		return { tags, tagsChange, handleRemoveTag, handleAddTag, isShowTagPanel }
	}(formData);

	// 处理图片相关
	const { filePaths, handleChooseImage, handleRemovePic } = function(formData) {
		const filePaths = ref([]); // 图片路径

		// 选择图片
		const handleChooseImage = () => {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera', 'album'], //从相册选择
				success: async (res) => {
					uni.showLoading({ title: '上传中...' });
					const result = await api.c_ask_api.upload({
						filePath: res.tempFilePaths[0],
					}).finally(() => setTimeout(uni.hideLoading, 100));
					filePaths.value.push(result.data.data);
					formData.value.photo = filePaths.value.map(item => item.id).join();
				}
			})
		}

		// 移除图片
		const handleRemovePic = (id) => {
			const index = filePaths.value.findIndex(item => item.id === id);
			filePaths.value.splice(index, 1);
			formData.value.photo = filePaths.value.map(item => item.id).join();
		}

		return { filePaths, handleChooseImage, handleRemovePic };
	}(formData);

	// 提交数据
	const handleSubmit = async () => {
		if (!formData.value.title) return uni.showNoneToast('请输入标题');
		if (!formData.value.description) return uni.showNoneToast('请输入内容');

		const res = await api.c_ask_api.add(toValue(formData));

		uni.showSuccessToast('提交成功', () => {
			uni.redirectTo({
				url: '/pagesC-my/ask-detail/index?id=' + res.data.id,
			});
		});
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx 25rpx;

		.form {
			padding: 8rpx 0 30rpx 35rpx;
			background-color: white;
			border-radius: 20rpx;

			.title {
				display: block;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				line-height: 1.5;
				margin-top: 22rpx;
				padding-left: 10rpx;
			}

			.input {
				display: block;
				height: 72rpx;
				font-size: 28rpx;
				color: #222222;
				margin-top: 8rpx;
				border-bottom: 1rpx solid #E5E5E5;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.text-area {
				display: flex;
				width: 100%;
				height: 196rpx;
				font-size: 28rpx;
				color: #222222;
				margin-top: 8rpx;

				box-sizing: border-box;
			}

			.tags-box {
				display: flex;
				padding-right: 20rpx;
				padding-bottom: 30rpx;
				border-bottom: 1rpx solid #E5E5E5;

				.tags {
					flex-grow: 1;
					display: flex;
					flex-wrap: wrap;
					margin-left: -26rpx;

					.tag {
						position: relative;
						height: 54rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 54rpx;
						background: #F2F2F4;
						border-radius: 30rpx;
						padding: 0 30rpx;
						margin: 18rpx 0 0 26rpx;

						.close-btn {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							font-size: 30rpx;
							color: #D9D9D9;
							border-radius: 50%;
							background: radial-gradient(#999999 50%, transparent 50%);
						}
					}
				}

				.add-tag {
					flex-shrink: 0;
					height: 54rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FE3333;
					line-height: 54rpx;
					background: #F9DEDE;
					border-radius: 30rpx;
					padding: 0 30rpx;
					margin-top: 18rpx;
				}
			}

			.upload-item {
				display: flex;
				flex-wrap: wrap;
				margin-left: -30rpx;
				overflow: hidden;

				.pic-box {
					position: relative;
					width: 136rpx;
					height: 136rpx;
					margin-top: 25rpx;
					margin-left: 30rpx;

					.pic {
						width: inherit;
						height: inherit;
						border-radius: 10rpx;
					}

					.close-btn {
						position: absolute;
						top: -25rpx;
						right: -25rpx;
						font-size: 40rpx;
						color: #D9D9D9;
						border-radius: 50%;
						background: radial-gradient(#999999 50%, transparent 50%);
					}
				}


				.upload-btn {
					width: 136rpx;
					height: 136rpx;
					font-size: 60rpx;
					color: #60646F;
					text-align: center;
					line-height: 136rpx;
					border-radius: 10rpx;
					background-color: #F5F4F5;
					margin-top: 25rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.btn-box {
		padding: 0 45rpx 0;

		.submit-btn {
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 28rpx;
			color: white;
			text-align: center;
			line-height: 88rpx;
			background-color: #FE3333;
		}
	}
</style>